<template>
    <div class="register-container">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef" label-width="100px"
            class="register-ruleForm">
            <h2 class="register-title">注册</h2>
            <el-form-item label="账号" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="ruleForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
            </el-form-item>

            <el-form-item label="确认密码" prop="checkPass">
                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="goLogin(ruleForm)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router"
import { reactive, ref } from 'vue'
let router = useRouter()
const ruleFormRef = ref()
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('Please input the password'))
    } else {
        if (ruleForm.pass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('pass', () => null)
        }
        callback()
    }
}
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('Please input the password again'))
    } else if (value !== ruleForm.pass) {
        callback(new Error("Two inputs don't match!"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    username: '',
    nickname: '',
    pass: '',
    checkPass: '',
})

const rules = reactive({
    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
    nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
    pass: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
})
const submitForm = function (formEl) {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            router.push('login') 
        } else {
            console.log('error submit!')
            return false
        }
    })
}
const goLogin = function (a) {
    router.push('login')
}
</script>
  
<style scoped>
.register-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../assets/images/app_community_0cdef6-1_924660115_1650699900614299.avif");
    background-size: cover;
}

.register-ruleForm {
    width: 400px;
    height: 500px;
    margin: 150px auto;
    padding: 20px;
    background-color: rgb(244, 247, 246);
    border-radius: 20px;
}

.register-title {
    text-align: center;
    background-color: rgb(172, 170, 153);
}
</style>

